﻿@inherits BaseComponent

<div>
    @if (!isSupported)
    {
        <Alert Message="浏览器不支持蓝牙功能" Type="AlertType.Error" ShowIcon="true" />
    }
    else
    {
        <div class="device-selector">
            <AntSelectCode @bind-Value="selectedDeviceId" DataSource="devices" />
            <div class="action-buttons">
                @if (!isConnected)
                {
                    <KButton Type="ButtonType.Primary" Icon="link" Name="连接" OnClick="ConnectDeviceAsync" Enabled="@(!string.IsNullOrEmpty(selectedDeviceId))" />
                }
                else
                {
                    <KButton Type="ButtonType.Primary" Icon="disconnect" Name="断开" Danger OnClick="DisconnectDeviceAsync" />
                }
                <KButton Type="ButtonType.Primary" Icon="reload" Name="刷新" OnClick="RefreshDevicesAsync" />
            </div>
        </div>
        
        @if (isConnected)
        {
            <div class="connection-status">
                <Alert Message="@($"已连接到: {connectedDeviceName}")" Type="AlertType.Success" ShowIcon="true" />
            </div>
        }
    }
</div>

<style>
    .device-selector {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        margin-bottom: 15px;
    }
    
    .device-selector .ant-select {
        flex: 1;
        min-width: 250px;
    }
    
    .action-buttons {
        display: flex;
        gap: 8px;
    }
    
    .device-option {
        display: flex;
        flex-direction: column;
    }
    
    .device-name {
        font-weight: bold;
    }
    
    .device-id {
        font-size: 0.8em;
        color: #888;
    }
    
    .connection-status {
        margin-top: 10px;
    }
    
    @@media (max-width: 768px) {
        .device-selector {
            flex-direction: column;
        }
        
        .action-buttons {
            width: 100%;
            justify-content: flex-end;
        }
    }
</style>